<template>
    <div>
        <div class="handle-box">
            <el-input v-model="query.user_name" @input="handleSearch" placeholder="请输入用户名" class="handle-input mr10"></el-input>
            <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
            <!-- <el-button type="primary" :icon="Plus">新增</el-button> -->
        </div>
        <div v-if="tableData.length == 0">没有该关键字的搜索结果</div>
        <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
            <el-table-column type="index" width="50" />
            <el-table-column prop="user_id" label="用户ID" align="center"></el-table-column>
            <el-table-column prop="user_nick_name" label="用户名"></el-table-column>
            <el-table-column prop="user_acc" label="账号"></el-table-column>
            <el-table-column label="头像(查看大图)" align="center">
                <template #default="scope">
                    <el-image class="table-td-thumb" :src="scope.row.user_img" :z-index="10" :preview-src-list="[scope.row.user_img]" preview-teleported> </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="注册时间"></el-table-column>
            <el-table-column label="操作" width="220" align="center">
                <template #default="scope">
                    <el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15"> 编辑 </el-button>
                    <el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)" v-permiss="16"> 删除 </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="pagination">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :current-page="query.pageIndex"
                :page-size="query.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script setup lang="ts" name="basetable">
import moment from "moment";
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
// 导入网络请求的接口
import { userList, userTotal, removeUser, searchUser } from "../api/index";

interface TableItem {
    user_id: number;
    user_nick_name: string;
    user_avator: string;
    user_create_time: string;
}

const query = reactive({
    pageIndex: 1, // 开始索引值
    pageSize: 5, // 每一页的数量
    user_name: "",
});

const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = (page_num = 1, page_size = 5) => {
    // 获取数据分页
    userList({ page_num, page_size }).then((content) => {
        // 观察用户列表数据
        // console.log('1.0',content)
        let { code, msg, result } = content;
        if (code == 200) {
            // 填充表格
            console.log(result);
            result = result.map((item: any) => {
                item.create_time = moment(item.create_time).format("YYYY-MM-DD hh:mm:ss");
                return item;
            });
            console.log(result);
            tableData.value = result;
        }
    });
};
getData();

// 初始化分页器
const initPage = () => {
    userTotal().then((content) => {
        // console.log('2.0',content);
        let { code, total } = content;
        if (code == 200) {
            // 设置分页
            pageTotal.value = total;
        }
    });
};

initPage();

// 分页导航
const handlePageChange = (val: number) => {
    query.pageIndex = val;
    getData(val, 5);
};

// 删除操作
const handleDelete = (index: number) => {
    // 二次确认删除
    ElMessageBox.confirm("确定要删除吗？", "提示", { type: "warning" })
        .then(() => {
            // ElMessage.success('删除成功');
            // console.log('x:',tableData.value.slice(index,index+1))
            // 获取用户信息
            let user: any = tableData.value.slice(index, index + 1)[0];
            let user_id = user.user_id;
            let user_acc = user.user_acc;
            console.log({ user_id, user_acc });
            // 删除用户
            removeUser({ user_id, user_acc })
                .then((content) => {
                    console.log(content);
                    let { msg, code } = content;
                    if (code == 200) {
                        tableData.value.splice(index, 1);
                    }
                    ElMessage(msg);
                })
                .then(() => {
                    initPage();
                    getData();
                });
        })
        .catch(() => {});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);

// 定义表单对象
let form = reactive({
    user_name: "",
    idex: "",
});

let idx: number = -1;
const handleEdit = (index: number, row: any) => {
    idx = index;
    form.user_name = row.user_name;
    editVisible.value = true;
};

// 查询操作
const handleSearch = () => {
    // 调用查询用户的api
    let user_name = query.user_name;
    console.log({ user_name });
    // 输入框没有值
    if (user_name.length == 0) {
        getData();
        // tableData.value = [];
        return;
    }
    // 搜索用户
    searchUser({ keyword: user_name }).then((content) => {
        // 观察用户列表数据
        // console.log('1.0',content)
        let { code, msg, result } = content;
        if (code == 200) {
            // 填充表格
            tableData.value = result;
        }
    });
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #f56c6c;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
